<!doctype html>
<html lang="en">
<head>
<title>购物网站</title>
<meta charset="utf-8"/>


<style>
	* {
		margin: 0;
		padding: 0;
		font-family: "宋体";
		list-style: none;
		color: #666;
		text-decoration: none;
		font-size: 14px;
	}



@keyframes gradientBG {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.container {
	width: 100%;
	top: 35%;
	text-align: center;
}

h1 {
	font-weight: 300;
}

h3 {
	color: #eee;
	font-weight: 100;
}

h5 {
	color:#eee;
	font-weight:300;
}

a,
a:hover {
	text-decoration: none;
	color: #ddd;
}

	.hid {
		overflow: hidden;
	}
	.left {
		float: left;
	}
	#box {
		width: 978px;
		margin: 20px auto;
	}
	#box ul {
		margin-right: -14px;
		overflow: hidden;
	}
	#box li {
		width: 234px;
		float: left;
		margin-right: 14px;
		padding: 34px 0 20px;
		background: #FFF;
		text-align: center;
		position: relative;
		cursor: pointer;
		margin-bottom:14px;
	}
	.pro_img {
		width: 150px;
		height: 150px;
		margin: 0 auto 18px;
	}
	.pro_name {
		display: block;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		font-weight: 400;
	}
	.pro_name a {
		color: #333;
	}
	.pro_price {
		color: #ad1b00;
		margin: 0 10px 10px;
	}
	.pro_rank {
		color: #b0b0b0;
	}
	#box li:hover .add_btn {
		display: block;
	}
	.add_btn {
		background: #399ef1;
		height: 66px;
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		line-height: 66px;
		display: none;
		color: #FFF;
		font-size: 20px;
	}
	.car {
		width: 978px;
		margin: 20px auto;
		background: #FFF;
	}
	.car .img {
		width: 300px;
	}

</style>
<script>

	window.onload = function(){
		var aData = [{"imgUrl":"/static/img/1.png","proName":"阿尼玛口红黑管哑光","proPrice":"350.00","proComm":"1.6"},
					 {"imgUrl":"/static/img/2.png","proName":"雅诗兰黛口红哑光烤栗红棕","proPrice":"290","proComm":"1.23"},
					 {"imgUrl":"/static/img/3.png","proName":"纪梵希红丝绒口红","proPrice":"360","proComm":"2.12"}
					 ];
		var oBox = document.getElementById("box");
		var oCar = document.getElementById("car");
		var oUl = document.getElementsByTagName("ul")[0];
		for(var i=0; i<aData.length; i++){
			var oLi = document.createElement("li");
			var data = aData[i];
			oLi.innerHTML += '<div class="pro_img"><img src="'+data["imgUrl"]+'" width="150" height="150"></div>';
			oLi.innerHTML += '<h3 class="pro_name"><a href="#">'+data["proName"]+'</a></h3>';
			oLi.innerHTML += '<p class="pro_price">'+data["proPrice"]+'元</p>';
			oLi.innerHTML += '<p class="pro_rank">'+data["proComm"]+'万人评价</p>';
			oLi.innerHTML += '<div class="add_btn">加入购物车</div>';
			oUl.appendChild(oLi);
		}
		var aBtn = getClass(oBox,"add_btn");
		for(var i=0; i<aBtn.length; i++){
			aBtn[i].index = i;
			aBtn[i].onclick = function(){
				var oDiv = document.createElement("div");
				var data = aData[this.index];
				oDiv.className = "row hid";
				oDiv.innerHTML += '<div class="img left"><img src="'+data["imgUrl"]+'" width="80" height="80"></div>';
				oDiv.innerHTML += '<div class="name left"><span>'+data["proName"]+'</span></div>';
				oDiv.innerHTML += '<div class="price left"><span>'+data["proPrice"]+'元</span></div>';
				oDiv.innerHTML += '<div class="ctrl left"><a href="javascript:;">×</a></div>';
				oCar.appendChild(oDiv);
				var delBtn = oDiv.lastChild.getElementsByTagName("a")[0];
				delBtn.onclick=function(){
					oCar.removeChild(oDiv);
				}
			}
		}
		function getClass(oBox,tagname){
			var aTag = oBox.getElementsByTagName("*");
			var aBox = [];
			for(var i=0; i<aTag.length; i++){
				if(aTag[i].className == tagname){
					aBox.push(aTag[i]);
				}
			}
			return aBox
		}
	}
</script>
</head>
<body>
<div id="box">
	<ul>
	</ul>
</div>
<div id="car" class="car">
	<div class="head_row hid">
		<div class="img left">&nbsp;</div>
		<div class="name left">商品详情</div>
	</div>
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

<footer class="text-muted py-5">
  <div class="container">
    <p class="float-end mb-1">
            <a href="/" class="btn btn-primary my-xl-1" style="color: #2542c2;font-size: 25px">返回首页</a>
    </p>
</footer>
</body>
</html>